<script setup>
import {gymDisplayColumns} from "@/views/businessFinance/dailyPaper/columns";
import {ElDatePicker, ElForm} from "element-plus";

const props = defineProps({
  columns: {
    type: Array,
    default: () => ([])
  },
  formData: {
    type: Object,
    default: () => ({})
  }
})


</script>

<template>
  <div>
    <el-form

        class="custom_form"
        v-bind="$attrs"
        :model="formData"
    >
      <el-form-item v-for="column in props.columns" :key="column.prop" :label="column.label">

        <template v-if="column.editType=='date'">
          <el-date-picker
              size="large"
              v-model="formData[column.prop]"
              type="date"
              :placeholder="`请选择${column.label}`"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"

          />
        </template>
        <template v-else-if="column.editType=='picker'">
          <el-select
              size="large"
              v-model="formData[column.prop]"
              type="date"
              :placeholder="`请选择${column.label}`"
              :columns="column.columns"
          >
            <el-option v-for="item in column.columns" :value="item">{{ item }}</el-option>
          </el-select>
        </template>
        <template v-else>
          <el-input v-model="formData[column.prop]" :placeholder="`请输入${column.label}`"/>
        </template>
      </el-form-item>

    </el-form>
  </div>
</template>

<style lang="scss" scoped>
:deep(.custom_form) {
  .el-date-editor, .el-select {
    width: 100% !important;
  }
}
</style>